<template>
  <div class="navbar-left">
    <!--<el-scrollbar wrap-class="scrollbar-wrapper">-->
      <el-menu
          router
          unique-opened
          :default-active="this.$route.path"
          mode="vertical"
          background-color="#304156"
          text-color="#ffffff"
          active-text-color="#409EFF"
          :collapse="collapse"
          class="menu"
      >
        <!-- labelKey, indexKey, childrenKey -->
        <side-bar-item
            v-for="(menu,index) in menuList"
            :key="index"
            :item="menu"
            index-key="url"
        ></side-bar-item>
      </el-menu>
    <!--</el-scrollbar>-->
  </div>
</template>

<script>
import SideBarItem from "@/components/common/SideBarItem";

export default {
  name: "SideBar",
  components: {
    SideBarItem,
  },
  props: {
    menuList: {
      type: Array,
      required: true,
    },
    isCollapsed: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    collapse() {
      return this.isCollapsed;
    }
  }
};
</script>

<style lang="scss" scoped>
/*.nav {
  !*transition: width 0.28s;
  !*width: 180px !important;*!
  height: 100%;
  !*position: fixed;*!
  //font-size: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;*!

  .horizontal-collapse-transition {
    transition: 0s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out;
  }

  .el-scrollbar {
    height: 100%;
  }

  .scrollbar-wrapper {
    overflow-x: hidden !important;

    .el-scrollbar__view {
      height: 100%;
    }
  }

  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }

  .is-horizontal {
    display: none;
  }

  a {
    display: inline-block;
    width: 100%;
    overflow: hidden;
  }

  .el-menu {
    border: none;
    height: 100%;
    width: 100%;
    text-align: left;
  }

  .is-active > .el-submenu__title {
    color: #f4f4f5 !important;
  }
}*/

.navbar-left  .menu{
  border: none;
  height: 100%;
  width: 100%;
  text-align: left;
}
</style>
